<template>
	<view>
		<!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<view class="line">
				
			</view>
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<view class="swiper-item uni-bg-red">A</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">B</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">C</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 四个图标 -->
		<view class="common_function">
			<view class="wary1">
				<uni-grid :column="4" :highlight="true" @change="change" :showBorder="false">
					<uni-grid-item v-for="(item, index) in 4" :index="index" :key="index">
						<view class="grid-item-box" style="background-color: #fff;">
							<uni-icons type="image" :size="20" color="#777" />
							<text class="text">文本信息</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
	<!-- 限时活动 -->
	<view class="current-activities-box">
		<view class="my-current">
			<view class="current-left">
				<span class="spanCurrent">限时活动</span>
				<!-- 倒计时组件 -->
				<uni-countdown class="countdownMy" :show-day="false" :hour="12" :minute="10" :second="10" />
			</view>
			<view class="current-right">
				<span class="moreIcon" @click="activity()">更多</span>
				<van-icon name="arrow" />
			</view>
		</view>
		
		<!-- 活动 -->
		<view class="activities-box">
			<!-- 可滚动视图容器 scroll-view -->
			<scroll-view scroll-x>
				<view class="item_list" >
				  
				</view>
				<view class="item_list" >
				  
				</view>
				<view class="item_list" >
				  
				</view>
				<view class="item_list" >
				  
				</view>
				<view class="item_list" >
				  
				</view>
				<view class="item_list" >
				  
				</view>
			</scroll-view>
		</view>
	</view>
	
		
		<!-- 平台推荐 -->
		<view class="common_function">
			<view class="common_top">
				<view class="message">
					平台推荐
				</view>
			</view>
			<!-- 活动海报 -->
			<view class="poster_box">
				<view class="poster poster_left">
					左海报
				</view>
				<view class="poster">
					<view class="poster_right_top poster_right">右上海报</view>
					<view class="poster_right_bottom poster_right">右下海报</view>
				</view>
			</view>
		</view>
		
		<!-- 四个错位活动海报 -->
		<view class="poster_four_box">
			<view class="poster_four_left">
				<view class="poster_four_big">
					<view class="poster_four_big_in">
						左上大
					</view>
					一元购物
				</view>
				<view class="poster_four_small">
					<view class="poster_four_small_in">
						右上小
					</view>
					活动购物xxxxx
				</view>
			</view>
			<view class="poster_four_right">
				<view class="poster_four_big">
					<view class="poster_four_big_in">
						右下大
					</view>
					活动购物xxxxx
				</view>
				<view class="poster_four_small poster_four_samll_top">
					<view class="poster_four_small_in">
						左下小
					</view>
					活动购物xxxxx
				</view>
			</view>
		</view>
		
		<!-- 页面底部提示 -->
		<view class="bottom_message">
			加载中...../已经到底了
		</view>
	</view>
</template>


<script>
export default {
    data() {
        return {
            indicatorDots: true,
            autoplay: true,
            interval: 2000,
            duration: 500
        }
    },
    methods: {
        changeIndicatorDots(e) {
            this.indicatorDots = !this.indicatorDots
        },
        changeAutoplay(e) {
            this.autoplay = !this.autoplay
        },
        intervalChange(e) {
            this.interval = e.target.value
        },
        durationChange(e) {
            this.duration = e.target.value
        },
		activity(){
			uni.navigateTo({
				url: "/pagesCamousLeaderPage/activity/activity"
			});
		}
    }
}
</script>


<style lang="scss">
	// 轮播图
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		position: relative;
		.line{
			width: 100%;
			height: 1px;
			background-color: white;
			position: absolute;
			top: 60px;
		}
	}
	.swiper {
		height: 500rpx;
		position: relative;
		z-index: -1;
	}
	.swiper-item {
		background-color: aquamarine;
		display: block;
		height: 500rpx;
		line-height: 500rpx;
		text-align: center;
		border-radius:0rpx 0rpx 50% 50%;
	}
	.swiper-list {
		background-color: aquamarine;
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}
	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	
	// 四个图标
	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px 0;
	}
	.text {
		font-size: 12px;
		margin-top: 5px;
	}
	.common_function {
		width: 95%;
		height: 11%;
		background-color: #fff !important;
		margin: 5px;
		padding: 5px;
		border-radius: 5px;
		.common_top {
			display: flex;
			align-items: center;
		}
	}
	
	
	// 限时活动
	.current-activities-box {
		margin-top: 16rpx;
		padding: 0rpx 20rpx;
		background-color: white;
		width: 100%;
		height: 335rpx;
		
		.my-current{
			display: flex;
			.current-left{
				margin-right: 20rpx;
				width: 50%;
				height: 40px;
				display: flex;
				align-items: center;
				
				.spanCurrent{
					margin-right: 20rpx;
					font-size: 30rpx;
					font-weight: bold;
				}
				// 倒计时组件
				.countdownMy{
					font-weight: bold;
					font-style: italic;
				}
			}
			.current-right{
				width: 43%;
				height: 40px;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.moreIcon{
					margin-right: 10rpx;
				}
			}
		}
		}
		
		// 活动
		.activities-box{
			padding-right: 20rpx;
			width: 92%;
			height: 100px;
			overflow: hidden;
			padding: 20rpx 15rpx 20rpx 20rpx;
			background-color: #efefef;
			border-radius: 10rpx;
			white-space: nowrap;
			
			scroll-view{
				height: 96px;
				.item_list{
					width: 160rpx;
					height: 100%;
					display: inline-block;
					margin-right: 10px;
					background-color: white;
					border-radius: 15rpx;
				}
			}
		}
	
	//平台推荐
	.poster_box{
		width: 100%;
		height: 11%;
		background-color: #fff !important;
		// margin: 5px;
		border-radius: 5px;
	}
	.poster_left{
		background-color: aquamarine;
		border-radius: 5px 5px 5px 5px;
	}
	.poster{
		width: 47%;
		height: 120px;
		float: left;
		margin: 5px;
		.poster_right{
			width: 100%;
			height: 55px;
			background-color: aquamarine;
			border-radius: 5px 5px 5px 5px;
		}
		.poster_right_bottom{
			margin-top: 10px;
		}
	}
	
	
	//四个错位活动海报
	.poster_four_box{
		width: 95%;
		height: 11%;
		background-color: #fff !important;
		margin: 5px;
		padding: 5px;
		border-radius: 5px 5px 5px 5px;
		text-align: center;
		font-size: 12px;
		.poster_four_big{
			width: 47%;
			height: 220px;
			background-color: #fff !important;
			float: left;
			border-radius: 5px 5px 5px 5px;
			margin: 5px;
			.poster_four_big_in{
				width: 90%;
				height: 170px;
				border-radius: 5px 5px 5px 5px;
				background-color: aquamarine;
				margin: 8px;
			}
		}
		.poster_four_small{
			width: 47%;
			height: 170px;
			background-color: #fff !important;
			float: left;
			border-radius: 5px 5px 5px 5px;
			margin: 5px;
			.poster_four_small_in{
				width: 90%;
				height: 120px;
				border-radius: 5px 5px 5px 5px;
				background-color: aquamarine;
				margin: 8px;
			}
		}
		.poster_four_samll_top{
			margin-top: -175px;
		}
	}
	
	
	//页面底部提示
	.bottom_message{
		text-align: center;
		color: #ccc;
	}
</style>

